.b_sub-brands
{
	width: 100%;
	position: relative;

	.mobile-view
	{
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 40px 0px;
		justify-content: center;
		align-items: flex-start;

		.shared-style-wrapper
		{
			display: flex;
			flex-direction: column;
			padding: 0px 17px 0px 3px;
			align-items: center;
			gap: 50px;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 1;
		}

		.shared-style-top-area
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 0;
		}

		.shared-style-heading
		{
			align-self: stretch;
			color: #FFF;
			font-family: Blinker;
			font-style: normal;
			font-size: 22px;
			font-weight: 400;
			line-height: 26px /* 118% */;
			text-align: center;
			order: 0;
		}

		.shared-set-right
		{

			.arrow-right-5
			{
				position: absolute;
				left: 0px;
				top: 0px;
				display: flex;
				width: 50px;
				height: 50px;
				overflow: clip;
				object-fit: fill;
				order: 0;
			}

			&:hover .arrow-right-5
			{
				content: url("/wp-content/acftb-content/acftb-blocks/Sub Brands/images/arrow-right-2-hover.svg");
			}
		}

		.shared-set-left
		{

			.arrow-left-4
			{
				position: absolute;
				left: 0px;
				top: 0px;
				transform: scaleX(-1);
				display: flex;
				width: 50px;
				height: 50px;
				overflow: clip;
				object-fit: fill;
				order: 0;
			}

			&:hover .arrow-left-4
			{
				content: url("/wp-content/acftb-content/acftb-blocks/Sub Brands/images/arrow-right-2-hover.svg");
			}
		}

		.shape
		{
			border-image-source: url("/wp-content/acftb-content/acftb-blocks/Sub Brands/images/shape-slice-10-100-100-10.svg");
			border-image-slice: 10 100 100 10 fill;
			border-image-width: 10px 100px 100px 10px;
			border-image-repeat: stretch;
			min-width: 110px;
			min-height: 110px;
			position: absolute;
			width: calc(100% - 16.99993896484375px);
			height: 100.14672726201461%;
			left: 0px;
			top: 0.0000045008770831024024%;
			order: 0;
		}

		h2.heading
		{
			font-size: 36px;
			line-height: 40px /* 111% */;
		}

		.subhead
		{
			display: contents;
		}

		.subhead p
		{
			color: #DFDFDF;
			order: 1;
		}

		.brands
		{
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 1;
		}

		.brands > .swiper
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 60px;
		}

		.content
		{
			align-items: center;
			gap: 30px;
			padding: 0 30px;
		}

		.atm-steel
		{
			display: flex;
			position: relative;
			flex: 0 0 100px;
			width: 100%;
			flex-shrink: 0;
			overflow: clip;
			object-fit: fill;
			order: 0;
		}

		.text-area
		{
			gap: 20px;
		}

		.description
		{
			display: contents;
		}

		.description p
		{
			align-self: stretch;
			color: #DFDFDF;
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 16px;
			font-weight: 500;
			line-height: 26px /* 163% */;
			letter-spacing: 0.02em;
			order: 1;
		}

		.view
		{
			display: flex;
			align-items: center;
			gap: 6px;
			position: relative;
			flex: 0 0 auto;
			order: 2;
		}

		span.view-atm-steel
		{
			color: #FFF;
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			order: 0;
		}

		.vector-72
		{
			height: 16px;
			position: relative;
			flex: 0 0 8px;
			flex-shrink: 0;
			object-fit: fill;
			order: 1;
		}

		.arrows
		{
			display: flex;
			align-items: flex-start;
			gap: 60px;
			position: relative;
			flex: 0 0 50px;
			flex-shrink: 0;
			order: 1;
		}

		.left
		{
			display: flex;
			padding: 0px -50px 0px 50px;
			justify-content: center;
			align-items: center;
			flex: 0 0 50px;
			order: 0;

			.arrow-left-4
			{
				position: relative;
				justify-content: center;
				align-items: center;
				gap: 10px;
				flex-shrink: 0;
				background-color: #818181;
			}
		}

		.right
		{
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 0 0 50px;
			order: 1;

			.arrow-right-5
			{
				position: relative;
				flex-shrink: 0;
			}
		}
	}

	.desktop-view
	{
		display: none;

		.shared-style-heading
		{
			align-self: stretch;
			color: #FFF;
			font-family: Blinker;
			font-style: normal;
			font-size: 26px;
			font-weight: 400;
			line-height: 30px /* 115% */;
			text-align: center;
			order: 1;
		}

		.shared-style-column-1
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 30px;
			position: relative;
			flex: 1 1 0%;
			min-width: 0;
			order: 0;
		}

		.shared-style-atm-steel
		{
			display: flex;
			position: relative;
			flex: 0 0 99.882px;
			width: 100%;
			overflow: clip;
			object-fit: contain;
			aspect-ratio: 283 / 100;
			order: 0;
		}

		.shared-style-description
		{
			align-self: stretch;
			color: #DFDFDF;
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 500;
			line-height: 28px /* 156% */;
			letter-spacing: 0.02em;
			order: 2;
		}

		.shared-style-view
		{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 6px;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 3;
		}

		.shared-style-view-atm-steel
		{
			color: #FFF;
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			order: 0;
		}

		.shared-style-vector-1722
		{
			height: 16px;
			position: relative;
			flex: 0 0 8px;
			object-fit: fill;
			order: 1;
		}

		.shape
		{
			border-image-source: url("/wp-content/acftb-content/acftb-blocks/Sub Brands/images/shape-slice-100-100-100-100.svg");
			border-image-slice: 100 100 100 100 fill;
			border-image-width: 100px 100px 100px 100px;
			border-image-repeat: stretch;
			min-width: 200px;
			min-height: 200px;
			position: absolute;
			width: calc(100% - 170px);
			height: 83.26320197424857%;
			left: 0;
			top: 8.454417431231393%;
			order: 1;
		}

		.content
		{
			display: flex;
			flex-direction: column;
			padding: 0px 150px;
			align-items: center;
			gap: 30px;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 2;
		}

		.headlines
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 30px;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 0;
		}

		h2.heading
		{
			font-size: 48px;
			line-height: 52px /* 108% */;
			order: 0;
		}

		.subhead
		{
			display: contents;
		}

		.subhead p
		{
			color: #DFDFDF;
			line-height: 32px /* 123% */;
		}

		.body
		{
			display: flex;
			align-items: flex-start;
			gap: 60px;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 1;
		}

		.column-2
		{
			order: 1;
		}

		.column-3
		{
			order: 2;
		}

		.roxteel
		{
			flex: 0 0 102.657px;
			aspect-ratio: 283 / 103;
		}

		.view-3
		{
			display: flex;
			align-items: center;
			gap: 6px;
			position: relative;
			flex: 0 0 auto;
			order: 3;
		}

		.vector-1801
		{
			height: 16px;
			position: relative;
			flex: 0 0 8px;
			flex-shrink: 0;
			object-fit: fill;
			order: 1;
		}
	}

	@media (min-width: 1440px)
	{
		.mobile-view { display: none; }
		.desktop-view
		{
			display: flex;
			flex-direction: column;
			padding: 126px 170px 126px 0px;
			align-items: flex-start;
			gap: 10px;
			width: 100%;
		}
	}
}